import useScroll from 'hooks/useScroll';
import { useScrollData } from 'mock/useScroll';
import style from './index.module.scss';

export default function UseScroll() {
  const [appRef, { position, setPosition }] = useScroll();
  const { left, top } = position;

  return (
    <div className={style.root}>
      <div className="container" ref={appRef}>
        <div className="wrap">{useScrollData}</div>
      </div>
      {(left > 100 || top > 300) && (
        <div className="back" onClick={() => setPosition()}>
          back
        </div>
      )}
    </div>
  );
}
